<template>
	<view class="system-config-container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">系统配置</text>
		</view>

		<!-- 配置表单 -->
		<view class="config-form">
			<!-- Logo配置 -->
			<view class="form-section">
				<view class="section-title">Logo配置</view>
				<view class="form-item">
					<text class="label">Logo图片</text>
					<view class="upload-area" @tap="chooseLogo">
						<image 
							v-if="formData.logoUrl" 
							:src="formData.logoUrl" 
							mode="aspectFit" 
							class="preview-image"
						></image>
						<view v-else class="upload-placeholder">
							<u-icon name="photo" color="#8B5CFF" size="40"></u-icon>
							<text>点击上传Logo</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 背景配置 -->
			<view class="form-section">
				<view class="section-title">背景配置</view>
				<view class="form-item">
					<text class="label">登录页背景</text>
					<view class="upload-area" @tap="chooseLoginBg">
						<image 
							v-if="formData.loginBgUrl" 
							:src="formData.loginBgUrl" 
							mode="aspectFill" 
							class="preview-image"
						></image>
						<view v-else class="upload-placeholder">
							<u-icon name="photo" color="#8B5CFF" size="40"></u-icon>
							<text>点击上传背景图</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 基本信息配置 -->
			<view class="form-section">
				<view class="section-title">基本信息</view>
				<view class="form-item">
					<text class="label">小程序名称</text>
					<input 
						class="input" 
						v-model="formData.appName" 
						placeholder="请输入小程序名称"
					/>
				</view>
				<view class="form-item">
					<text class="label">小程序简介</text>
					<textarea 
						class="textarea" 
						v-model="formData.appDesc" 
						placeholder="请输入小程序简介"
					></textarea>
				</view>
			</view>

			<!-- 保存按钮 -->
			<button class="save-button" @tap="saveConfig">保存配置</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				logoUrl: '',
				loginBgUrl: '',
				appName: '',
				appDesc: ''
			},
			configId: null
		}
	},
	onLoad() {
		this.loadConfig();
	},
	methods: {
		// 加载配置
		async loadConfig() {
			try {
				// 尝试查询全局配置
				const result = await this.$leanCloud.query('SystemConfig', {
					global: true
				});
				
				if (result && result.results && result.results.length > 0) {
					// 如果存在配置，使用第一条记录
					const config = result.results[0];
					this.formData = {
						logoUrl: config.logoUrl || '',
						loginBgUrl: config.loginBgUrl || '',
						appName: config.appName || '',
						appDesc: config.appDesc || ''
					};
					// 保存objectId以便后续更新
					this.configId = config.objectId;
				} else {
					console.log('未找到配置，将在保存时创建');
				}
			} catch (error) {
				if (error.code === 101) {
					console.log('SystemConfig表不存在，将在保存时创建');
				} else {
					console.error('加载配置失败:', error);
				}
			}
		},
		
		// 选择Logo
		async chooseLogo() {
			try {
				// 使用Promise风格调用uni.chooseImage
				const chooseImagePromise = () => {
					return new Promise((resolve, reject) => {
						uni.chooseImage({
							count: 1,
							sizeType: ['compressed'],
							sourceType: ['album'],
							success: resolve,
							fail: reject
						})
					})
				}
				
				const res = await chooseImagePromise();
				
				if (res && res.tempFilePaths && res.tempFilePaths.length > 0) {
					const tempFilePath = res.tempFilePaths[0];
					const fileName = `logo_${Date.now()}.jpg`;
					
					uni.showLoading({
						title: '上传中...'
					});
					
					// 使用项目中定义的文件上传API
					const fileData = await this.$leanCloud.file.upload(tempFilePath, fileName);
					
					// 获取文件URL
					this.formData.logoUrl = fileData.url;
					
					uni.hideLoading();
				}
			} catch (error) {
				console.error('上传Logo失败：', error);
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},
		
		// 选择登录背景
		async chooseLoginBg() {
			try {
				// 使用Promise风格调用uni.chooseImage
				const chooseImagePromise = () => {
					return new Promise((resolve, reject) => {
						uni.chooseImage({
							count: 1,
							sizeType: ['compressed'],
							sourceType: ['album'],
							success: resolve,
							fail: reject
						})
					})
				}
				
				const res = await chooseImagePromise();
				
				if (res && res.tempFilePaths && res.tempFilePaths.length > 0) {
					const tempFilePath = res.tempFilePaths[0];
					const fileName = `login_bg_${Date.now()}.jpg`;
					
					uni.showLoading({
						title: '上传中...'
					});
					
					// 使用项目中定义的文件上传API
					const fileData = await this.$leanCloud.file.upload(tempFilePath, fileName);
					
					// 获取文件URL
					this.formData.loginBgUrl = fileData.url;
					
					uni.hideLoading();
				}
			} catch (error) {
				console.error('上传背景图失败：', error);
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},
		
		// 保存配置
		async saveConfig() {
			try {
				uni.showLoading({ title: '保存中...' });
				
				const saveData = {
					logoUrl: this.formData.logoUrl,
					loginBgUrl: this.formData.loginBgUrl,
					appName: this.formData.appName,
					appDesc: this.formData.appDesc,
					global: true  // 标记为全局配置
				};
				
				if (this.configId) {
					// 如果已有配置，更新它
					await this.$leanCloud.update('SystemConfig', this.configId, saveData);
				} else {
					// 否则创建新配置
					const result = await this.$leanCloud.create('SystemConfig', saveData);
					this.configId = result.objectId;
				}
				
				uni.hideLoading();
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
				
				// 重新加载配置
				await this.loadConfig();
			} catch (error) {
				console.error('保存配置失败:', error);
				uni.showToast({
					title: error.message || '保存失败',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss">
.system-config-container {
	min-height: 100vh;
	background-color: #F5F6FA;
	padding: 30rpx;
}

.header {
	margin-bottom: 30rpx;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
}

.config-form {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-section {
	margin-bottom: 40rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #8B5CFF;
	}
}

.form-item {
	margin-bottom: 30rpx;
	
	.label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		background-color: #F5F6FA;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}
	
	.textarea {
		width: 100%;
		height: 160rpx;
		background-color: #F5F6FA;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
	
	.upload-area {
		width: 100%;
		height: 300rpx;
		background-color: #F5F6FA;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		
		.preview-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.upload-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #999999;
			font-size: 28rpx;
			
			text {
				margin-top: 10rpx;
			}
		}
	}
}

.save-button {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(to right, #8B5CFF, #A47EFF);
	border-radius: 45rpx;
	color: #FFFFFF;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
	box-shadow: 0 8rpx 16rpx rgba(139, 92, 255, 0.3);
	
	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 8rpx rgba(139, 92, 255, 0.2);
	}
}
</style> 